<template>
  <div class="newsinfo-container">
    <h3 class="title">{{ currentNews.title }}</h3>
    <p class="sub-title">
      <span>发表时间：{{ currentNews.addtime | dateFormat }}</span>
      <span>浏览次数：{{ currentNews.click }}</span>
    </p>
    <hr>
    <div class="content" v-html="currentNews.content">
    </div>
    <hr>
    <comment-box :id="id"></comment-box>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

import comment from '../subcomponents/comment.vue'

export default {
  data() {
    return {
      id: this.$route.params.id,
      currentNews: ''
    }
  },
  methods: {
    getNewsInfo() {
      this.$http.get('news/'+this.id+'/show').then(result => {
        this.currentNews = result.body
      }, error => {
        Toast('获取详情失败！')
      })
    }
  },
  created() {
    this.getNewsInfo()
  },
  components: {
    'comment-box': comment
  }
};
</script>

<style lang="scss">
  .newsinfo-container{
    padding: 0 4px;
    .title{
      padding: 15px 0;
      font-size: 17px;
      text-align: center
    }

    .sub-title{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }

    .content{
      img{
        width: 100%;
      }
    }
  }
</style>
